<script setup lang="ts">
import {
  apiCollectAdd,
  apiCollectDel,
  appCommentAdd,
  appCommentList,
  appCommentDel,
} from "@/apis/collect";
import { apiAddFollow } from "@/apis/my";
import {
  apiProductAuth,
  apiProductDetails1,
  apiProductEdit,
  apiProductRemove,
} from "@/apis/product";
import { getMediaUrl, router, toast } from "@/utils/tools";
import { onLoad } from "@dcloudio/uni-app";
import { onShow } from "@dcloudio/uni-app";
import _default from "pinia-plugin-persistedstate";
import { ref, reactive, onMounted, watch, watchEffect, computed } from "vue";
import { useUserStore } from "@/stores/user";
import { isImg } from "@/utils/tools";
import { onReachBottom } from "@dcloudio/uni-app";
import moment from "moment";

moment.defineLocale("zh-cn", {
  relativeTime: {
    future: "%s内",
    past: "%s前",
    s: "几秒",
    m: "1分钟",
    mm: "%d分钟",
    h: "1小时",
    hh: "%d小时",
    d: "1天",
    dd: "%d天",
    M: "1个月",
    MM: "%d个月",
    y: "1年",
    yy: "%d年",
  },
});

const userStore = useUserStore();
const noScroll = ref(false);
const qrcode2 = ref();
const detailId = ref(0);
const productDetail = reactive<any>({
  qrcode: "https://www.stoneplayer.com/yuehui/index.html",
});
const pageNum = ref(1);
const pageSize = ref(10);
const isMore = ref(false);
const commonList = ref([]);
const commonTotal = ref(0);
const imgwh = reactive({
  w: 0,
  h: 0,
});
const replyUser = reactive({
  userName: "",
  userId: "",
});
// const productQrcodeContent = reactive({
//   titlle: '',
//   describes: '',
//   images: '',
//   types: '',
//   brand: '',
//   fineness: '',
// });
const productQrcodeContent = ref();
let popup = ref({}); // state 1-待上架 2-在售  3-已售 4-下架 5-收藏
// 删除弹窗
const validatePopup = ref(false);
// 平台已认证弹窗
const attestationPopup = ref(false);
// 管理弹窗
let managePopup = ref(true);
const noticePopup = ref(false);
const viewImgPopup = ref(false);
const isCompltete = ref(false);
const qrcode = ref(null);
let viewImgUrl = ref("");
let qrcodeOptions = ref({
  margin: 10,
});
//类型 是从个人中心还是首页跳转
let type = ref("index");
// onReady() {}
// 详情a
const getDetail = async () => {
  let appUserId = null;
  if (userStore.userInfo === undefined) {
    appUserId = null;
  } else {
    appUserId = userStore.userInfo.id;
  }
  let res = await apiProductDetails1({
    id: detailId.value,
    appUserId: appUserId,
  });
  if (res.code == 500) {
    toast("系统错误");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
  }
  Object.assign(productDetail, res.data);
  productDetail.images = productDetail.images?.split(",");
  productDetail.videos = productDetail.videos?.split(",")?.filter(Boolean);
  productDetail.dict = JSON.parse(productDetail.dict);
  productDetail.counts = [
    productDetail.leng && {
      key: productDetail.leng + "cm",
      label: "长",
    },
    productDetail.wide && {
      key: productDetail.wide + "cm",
      label: "宽",
    },
    productDetail.heg && {
      key: productDetail.heg + "cm",
      label: "高",
    },
    productDetail.weight && {
      key: productDetail.weight + "kg",
      label: "重量",
    },
  ].filter(Boolean);
  productDetail.dict2 = [
    ...(productDetail.dict || []),
    productDetail.leng && {
      name: productDetail.leng ? productDetail.leng + "cm" : "",
      fieldName: "长",
    },
    productDetail.wide && {
      name: productDetail.wide ? productDetail.wide + "cm" : "",
      fieldName: "宽",
    },
    productDetail.heg && {
      name: productDetail.heg ? productDetail.heg + "cm" : "",
      fieldName: "高",
    },
    productDetail.weight && {
      name: productDetail.weight ? productDetail.weight + "kg" : "",
      fieldName: "重量",
    },
  ].filter(Boolean);
};
const handleComplete = (e: any) => {
  isCompltete.value = e.success;
};
const handleSaveQrcode = (e: any) => {
  if (false === isCompltete.value) {
    toast("二维码未加载完成！");
    return false;
  }

  qrcode.value.save({
    success: (res: any) => {
      if (res.errMsg == "saveImageToPhotosAlbum:ok") {
        toast("保存成功！");
        return false;
      }
    },
  });
  // isCompltete.value = e.success;
};

// 关注
const handleFollow = async () => {
  return;
  if (!isLoginChange()) {
    return;
  }
  // 防抖
  uni.$uv.debounce(addFollow(), 500);
};
const addFollow = async () => {
  let res = await apiAddFollow({
    appFollowId: productDetail.appUserId,
  });

  if (res.code == 200) {
    toast("关注成功！");
    getDetail();
  }
};
const handleDetail = () => {
  router(
    `/pagesMerchand/store?shopId=${productDetail.appUserId}&userId=${productDetail.id}`
  );
};
const getCommentList = async () => {
  let res = await appCommentList({
    sourceId: productDetail.id,
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  });
  if (res.code == 200) {
    commonTotal.value = res.total;
    if (res.rows.length < 10) {
      isMore.value = true;
    }
    commonList.value.push(...res.rows);
  }
};
const resetComment = () => {
  pageNum.value = 1;
  pageSize.value = 10;
  isMore.value = false;
  commonList.value = [];
};
onShow(async () => {
  uni.setStorageSync("indexDetail", "indexDetail");
  await getDetail();
  // resetComment();
  // await getCommentList();
});
onLoad((options: any) => {
  detailId.value = options.id ?? "";
  type.value = options.type ?? "index";
  // getDetail();
});

onReachBottom((e: any) => {
  if (isMore.value) return;
  pageNum.value++;
  getCommentList();
});

const isLoginChange = () => {
  if (!uni.getStorageSync("token")) {
    router("/pages/login/login");
    return false;
  } else {
    return true;
  }
};

const handleLook = async () => {
  // let productDetailBase64 = btoa(JSON.stringify(productDetail));
  attestationPopup.value.open(true);

  let data = {
    title: productDetail.title,
    describes: productDetail.describes,
    images: productDetail.images,
    brand: productDetail.brand,
    fineness: productDetail.fineness,
    types: productDetail.types,
  };

  productQrcodeContent.value = JSON.stringify(data);

  // Object.assign(productQrcode, data);
};
const handleAddCollect = async () => {
  if (!isLoginChange()) {
    return;
  }
  if (productDetail.collect) {
    // toast("您已收藏！");
    let res1 = await apiCollectDel({ commodityId: productDetail.id });
    if (res1.code == 200) {
      getDetail();
      toast("取消收藏成功！");
    }
    return false;
  }
  let res = await apiCollectAdd({ commodityId: productDetail.id });
  if (res.code == 200) {
    getDetail();
    toast("收藏成功！");

    return false;
  }
};

const byClick = () => {
  if (!isLoginChange()) {
    return;
  }
  uni.navigateTo({
    url: `/pagesOrder/order/confirmOrder?orderId=${productDetail.id}`,
  });
};
const bySameStyle = () => {
  uni.switchTab({
    url: `/pages/publish/publish`,
  });
};
const handleProductAuth = async () => {
  // let res = await apiProductAuth({
  //   "shopGoodsId": productDetail.id, //商品ID
  //   "describes": productDetail.describes, //商品描述
  //   "images": productDetail.images.join(','), //藏品照片和视频
  //   "otherImages": "sdfsfdsdfds", //其他照片认证证书等
  //   "money": 10, //认证费用
  //   "comment": "" //专家认证评语
  // });
};
// 点击管理
const manageClick = () => {
  if (!isLoginChange()) {
    return;
  }
  managePopup.value.open(true);
};
// 藏品认证
const collectionClick = () => {
  uni.navigateTo({
    url: `/pagesMerchand/collection-certification`,
  });
};

const handleAuthentication = () => {
  if (
    type.value === "my" &&
    userStore.userInfo.id === productDetail.appUserId
  ) {
    // qrcode2.value.open();
    // if (productDetail.authentication == 1) {
    //   qrcode2.value.open();
    // } else {
    //   uni.navigateTo({
    //     url: `/pagesMerchand/collection-certification?productId=${productDetail.id}`,
    //   });
    // }
    if (productDetail.authentication) return;
    uni.navigateTo({
      url: `/pagesMerchand/collection-certification?productId=${productDetail.id}`,
    });
  }
};

// 编辑
const compileClick = () => {
  managePopup.value.close();
  uni.navigateTo({
    url: `/pagesMerchand/info-edit?id=${productDetail.id}`,
  });
};
// 下架
const handleOut = async (state) => {
  // uni.navigateTo({
  //   url: `/pagesMerchand/info-edit?id=${productDetail.id}`
  // })
  let res = await apiProductEdit({ id: productDetail.id, state });

  if (res.code == 200) {
    getDetail();
    toast(state === 4 ? "下架成功！" : "上架成功！");
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1000);
    return false;
  }
};
// 删除
const handleDelete = async () => {
  let res = await apiProductRemove({ id: productDetail.id });
  if (res.code == 200) {
    uni.navigateBack({
      delta: 1,
    });
    return false;
  }

  // uni.navigateTo({
  //   url: `/pagesMerchand/info-edit?id=${productDetail.id}`
  // })
};
const change = (e: any) => {
  noScroll.value = e.show;
};

const isFlag = computed(() => {
  // 认证 显示
  if (productDetail.authentication === 1) {
    return true;
  }
  // 收藏 不显示
  if (productDetail.collect) {
    return false;
  }
  // 已售 不显示
  if (productDetail.state === 3) {
    return false;
  }
  return true;
});
const getClassWrap = () => {
  return ["img-wrapper", `len${productDetail?.images?.length}`];
};
const handleRenzhen = () => {
  // 已售不做处理
  if (productDetail.state === 3) {
    return;
  }
  if (productDetail.authentication == 1) {
    handleLook();
  } else {
    handleAuthentication();
  }
};
const handleguize = () => {
  noticePopup.value.open(true);
};
const closehandleguize = () => {
  noticePopup.value.close();
};
const getQrcodeShow = () => {
  // if (type.value === "my") {
  //   return true;
  // }

  return productDetail.authentication == 1;
};

const handleViewImg = (src) => {
  viewImgUrl.value = src;
  uni.getImageInfo({
    src,
    success: (res) => {
      imgwh.w = res.width;
      imgwh.h = res.width;
      viewImgPopup.value.open(true);
    },
  });
  // viewImgPopup.value.open(true);
};
const previewImage = (index) => {
  uni.previewImage({
    current: index, // 当前显示图片索引
    urls: productDetail.images, // 需要预览的图片http链接列表
  });
};
const handleEnterPress = async (e) => {
  return;
  const content = productDetail.msg;
  if (!content) {
    return toast("请输入留言");
  }
  const data = {
    sourceId: productDetail.id,
    appUserId: userStore.userInfo.id,
    appConsumptionId: replyUser.userId || productDetail.appUserId,
    objectUser: replyUser.userName || productDetail.userName,
    content,
    appUserName: userStore.userInfo.userName,
    appUserImage: userStore.userInfo.headSculpture,
  };
  let res1 = await appCommentAdd(data);
  if (res1.code == 200) {
    toast("留言成功");
    productDetail.msg = "";
    resetComment();
    getCommentList();
  }
};
const getImgUrl = (url, idx) => {
  const len = productDetail?.images?.length;
  if (len === 1 || len === 2) {
    return getMediaUrl(url, 690, 687);
  }
  if (len === 3 || len === 4 || len === 6) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    return getMediaUrl(url, 345, 345);
  }
  if (len === 5) {
    if (idx === 1) {
      return getMediaUrl(url, 690, 687);
    }
    return getMediaUrl(url, 345, 345);
  }
  if (len === 7) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    if (idx === 3 || idx === 4) {
      return getMediaUrl(url, 345, 345);
    }
    return getMediaUrl(url, 230, 228);
  }
  if (len === 8) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    return getMediaUrl(url, 230, 228);
  }
  if (len === 9) {
    if (idx === 1 || idx === 2) {
      return getMediaUrl(url, 690, 687);
    }
    if (idx === 3 || idx === 4 || idx === 5 || idx === 6) {
      return getMediaUrl(url, 345, 345);
    }
    return getMediaUrl(url, 230, 228);
  }

  return getMediaUrl(url);
};

const handleReply = (item) => {
  replyUser.userName = item.appUserName;
  replyUser.userId = item.appUserId;
};

const handleBlur = () => {
  replyUser.userName = "";
  replyUser.userId = "";
};

const delComment = async (id) => {
  let res1 = await appCommentDel({ id });
  if (res1.code == 200) {
    toast("删除成功");
    resetComment();
    getCommentList();
  }
};

const getPlaceholder = () => {
  if (replyUser.userName) {
    return "回复" + replyUser.userName;
  }
  return "还没有人留言，你来说两句～";
};

const deliveryFilter = computed(() => {
  return (delivery: any) => {
    if (delivery === 0) {
      return "包邮";
    } else if (delivery === 1) {
      return "不包邮";
    } else {
      return "自取";
    }
  };
});

onMounted(() => {
  // validatePopup.value.open(true);
  // attestationPopup.value.open(true);
});
</script>

<template>
  <view
    class="detail-wrapper"
    id="detail-wrapper"
    :class="!noScroll ? 'detail-wrapper' : 'noscroll'"
  >
    <view class="video-wrapper" v-if="productDetail?.videos?.length">
      <video class="video" :src="productDetail?.videos?.[0]" />
    </view>
    <view class="box-1">
      <view class="info-boxs">
        <view class="info-left">
          <image
            v-if="productDetail.headSculpture"
            :src="productDetail.headSculpture"
            class="img"
          />
          <image v-else src="@/static/images/avatar_default.png" class="img" />
        </view>
        <view class="info-right">
          <view class="right1" @click="handleDetail">
            <view class="title">
              <text>{{ productDetail.shopName }}</text>
              <view class="shop-vip-level">
                <image class="bx1" src="@/static/images/level-box.png" />
                <image class="bx2" src="@/static/images/level-star.png" />
                <text class="bx3">LV{{ productDetail.shopVip }}</text>
              </view>
            </view>

            <view class="sub-title">{{ productDetail.personalProfile }}</view>
          </view>
          <view class="right2" v-if="!productDetail.follow && type !== 'my'">
            <button @click="handleFollow" class="follow">
              <image src="@/static/images/follow-add.png" />
              <text>关注</text>
            </button>
          </view>
        </view>
      </view>
      <view class="qishi-xuzhi" @click="handleguize">
        <view class="t1">
          <image src="@/static/images/qishixuzhi.png" />
        </view>
        <view class="t2">买前了解交易规则</view>
        <view class="t3">
          <image src="@/static/images/arrow1.png" />
        </view>
      </view>
      <!-- v-if="productDetail.state != 3" -->
      <view class="qishi-renzheng-wrapper" v-if="getQrcodeShow()">
        <view class="line321"></view>
        <view class="qishi-renzheng">
          <view class="left-approve">
            <image src="../static/images/qishirenzhen.png" />
          </view>
          <view class="right-approve">
            <template v-if="productDetail.authentication === 0">
              <text
                class="case3"
                v-if="productDetail.state == 4"
                @click="handleRenzhen"
                >申请认证</text
              >
              <view class="no-auth" @click="handleRenzhen">
                <image src="../static/images/arrow1.png" />
              </view>
            </template>
            <template v-if="productDetail.authentication === 1">
              <image
                @click="handleRenzhen"
                src="../static/images/qrcode.png"
                class="case1"
              />
            </template>
            <template v-if="productDetail.authentication === 2">
              <text class="case3">认证中...</text>
            </template>
          </view>
        </view>
      </view>
      <view class="qishi-details-box">
        <view class="details-title">{{ productDetail.title }}</view>
        <view class="details-money">
          <view class="price-box">
            <text class="price-ico">￥</text>
            <text class="price-text">{{ productDetail.currentPrice }}</text>
            <text class="price-line"></text>
            <text class="price-delivery">{{
              deliveryFilter(productDetail.delivery)
            }}</text>
          </view>
          <view class="shoucang-box">
            <text>{{ productDetail.num }}人收藏</text>
          </view>
        </view>
      </view>
    </view>

    <view class="box-2">
      <!-- <view class="menu-title">{{
        productDetail?.dict?.map((o) => o.fieldName).join("、")
      }}</view>
      <view class="menus-wrapper">
        <view
          class="item-menu"
          v-for="(item, idx) in productDetail.dict"
          :key="item"
          :style="{
            textAlign:
              idx === 0
                ? 'left'
                : idx === productDetail.dict?.length - 1
                ? 'right'
                : 'center',
            width: 100 / productDetail.dict?.length + '%',
          }"
        >
          <view class="menu-t1">{{ item.fieldName }}</view>
          <view class="menu-t2">{{ item.name }}</view>
          <view
            class="line"
            v-if="idx !== productDetail.dict?.length - 1"
          ></view>
        </view>
      </view>

      <view class="count-title" v-if="productDetail?.counts?.length"
        >尺寸/重量</view
      >
      <view class="count-wrapper" v-if="productDetail?.counts?.length">
        <view
          class="count-item"
          v-for="(item, idx) in productDetail.counts"
          :key="idx"
          :style="{
            width: 100 / productDetail.counts?.length + '%',
          }"
        >
          <view class="count-t1">{{ item.label }}</view>
          <view class="count-t2">{{ item.key }}</view>
          <view
            class="line"
            v-if="idx !== productDetail.counts?.length - 1"
          ></view>
        </view>
      </view> -->

      <view class="desc">{{ productDetail.describes }}</view>
      <!--  textAlign:
              productDetail.dict2.length === 2
                ? 'left'
                : idx === 0
                ? 'left'
                : idx === productDetail?.dict2.length - 1
                ? 'right'
                : 'center', -->
      <view class="count-wrapper2" v-if="productDetail?.dict2?.length">
        <view
          class="count-item"
          v-for="(item, idx) in productDetail.dict2"
          :key="idx"
          :style="{
            width: 100 / 6 + '%',
          }"
        >
          <view class="count-t1">{{ item.fieldName }}</view>
          <view class="count-t2">{{ item.name }}</view>
          <!-- <view class="count-t2">9999.99kg</view> -->
          <view
            class="line"
            v-if="idx !== productDetail.dict2?.length - 1"
          ></view>
        </view>
      </view>

      <view :class="getClassWrap()" v-if="productDetail.images">
        <image
          class="img"
          v-for="(item, idx) in productDetail.images"
          :src="getImgUrl(item, idx + 1)"
          :key="item"
          mode="scaleToFill"
          @click="() => previewImage(idx)"
        />
      </view>
    </view>

    <view class="liuyan">
      <view class="title">留言（{{ commonTotal }}）</view>

      <view class="main1">
        <view class="main">
          <image
            v-if="productDetail.headSculpture"
            :src="productDetail.headSculpture"
          />
          <image v-else src="@/static/images/avatar_default.png" />
          <input
            type="text"
            v-model="productDetail.msg"
            :placeholder="getPlaceholder()"
            @blur="handleBlur"
          />
        </view>
        <text class="search-btn" @click="handleEnterPress">发送</text>
      </view>
      <view class="comment-list">
        <view class="comment-item" v-for="(item, idx) in commonList" :key="idx">
          <image
            class="avatar"
            :src="item.appUserImage"
            @click="() => handleReply(item)"
          />
          <view class="com-box" @click="() => handleReply(item)">
            <view class="name">
              <text class="n1">{{ item.appUserName }}</text>
              <text class="n2">{{ moment(item.createTime).fromNow() }}</text>
            </view>
            <view class="content">
              <text v-if="item.appConsumptionId !== productDetail.appUserId"
                >回复<text style="color: blue">@{{ item.objectUser }}</text
                >:</text
              >
              <text>{{ item.content }}</text>
            </view>
          </view>
          <image
            class="del"
            id="comment-del"
            v-if="item.appUserId === userStore.userInfo.id"
            @click="() => delComment(item.id)"
            src="../static/images/comment-del.png"
          />
        </view>
      </view>
    </view>

    <view class="empty-bottom"></view>

    <!-- 管理弹窗 -->
    <uv-popup
      ref="managePopup"
      mode="bottom"
      closeable="true"
      zoom="true"
      round="10"
    >
      <view class="validate">
        <!-- <view class="manage-row" @tap="collectionClick()">藏品认证</view> -->
        <view class="manage-row" @tap="compileClick()">编辑</view>
        <view
          class="manage-row"
          @click="() => handleOut(4)"
          v-if="productDetail.state === 2"
          >下架</view
        >
        <view
          class="manage-row"
          @click="() => handleOut(2)"
          v-if="productDetail.state === 4"
          >上架</view
        >
        <view class="manage-row" @click="handleDelete">删除</view>
        <!-- <view class="manage-row">取消</view> -->
      </view>
    </uv-popup>
    <!-- 删除提醒弹出 -->
    <uv-popup
      ref="validatePopup"
      closeable="true"
      :customStyle="{ width: '650rpx', height: 'auto' }"
      zoom="true"
      round="10"
      @change="change"
    >
      <view class="validate">
        <view class="icon flex flex-center">
          <view class="icon2 flex flex-center">
            <image
              src="@/static/images/alarm-warning-line.png"
              mode="scaleToFill"
            />
          </view>
        </view>
        <view class="title"> 删除提醒 </view>
        <view class="content"
          >尊敬的用户，您好，删除后商品需要重新上传，请谨慎操作！</view
        >
        <view class="pop-btn flex flex-between">
          <button class="cancel">取 消</button>
          <button class="confirm-del">确认删除</button>
        </view>
      </view>
    </uv-popup>
    <!-- 会员已认证弹窗 -->
    <uv-popup
      ref="attestationPopup"
      closeable="true"
      :customStyle="{ width: '650rpx', height: 'auto' }"
      zoom="true"
      round="10"
      @change="change"
    >
      <view class="validate">
        <view class="title-pop flex flex-align-center">
          <view class="head-img">
            <image src="@/static/images/alarm-warning-line.png" class="img" />
          </view>
          <view class="title-text flex flex-column">
            <text>平台已认证</text>
            <text>认证时间：{{ productDetail.updateTime }}</text>
          </view>
        </view>
        <view class="describe-box">{{ productDetail.title }}</view>
        <view class="qr-code">
          <!-- <image src="@/static/images/alarm-warning-line.png" class="img" /> -->

          <!-- <view class="flex justify-center img"> -->
          <view class="flex justify-center">
            <uv-qrcode
              @complete="handleComplete"
              :h5DownloadName="productDetail.title"
              :h5SaveIsDownload="true"
              ref="qrcode"
              size="550rpx"
              :value="`https:www.stoneplayer.com/#/pagesMerchand/land-details?id=${productDetail.id}`"
              :options="qrcodeOptions"
            ></uv-qrcode>
          </view>
          <!-- </view>   -->
        </view>
        <view class="save-btn">
          <!-- #ifdef H5 -->
          <button>长按二维码保存</button>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <button @click="handleSaveQrcode">保存二维码</button>
          <!-- #endif -->
        </view>
      </view>
    </uv-popup>

    <uv-popup
      ref="noticePopup"
      mode="bottom"
      zoom="true"
      round="10"
      :closeable="false"
      @change="change"
    >
      <view class="notice-wrapper">
        <view class="top">
          <view class="empty"></view>
          <view class="t1">
            <image src="@/static/images/qishixuzhi.png" />
          </view>
          <view class="t2"> 买前了解退货规则，保障你的交易权益 </view>
          <view class="t3" @click="closehandleguize">
            <image src="@/static/images/closed11.png" />
          </view>
          <view class="t4">
            <image src="@/static/images/xuzhi-bg.png" />
          </view>
        </view>
        <view class="bottom">
          <view class="title">
            <view class="title1"></view>
            <view class="title2">交易前须知</view>
          </view>
          <view class="sub-title"
            >在购买前与卖家充分沟通，确认宝贝细节并达成一
            致，发货后不支持无理由退货</view
          >
        </view>
        <view class="bottom">
          <view class="title">
            <view class="title1"></view>
            <view class="title2">交易前须知</view>
          </view>
          <view class="sub-title"
            >在购买前与卖家充分沟通，确认宝贝细节并达成一
            致，发货后不支持无理由退货</view
          >
        </view>
        <view class="btn" @click="closehandleguize">我知道了</view>
      </view>
    </uv-popup>

    <uv-popup
      ref="viewImgPopup"
      zoom="true"
      round="10"
      :closeable="false"
      @change="change"
    >
      <view class="view-img">
        <image
          :src="getMediaUrl(viewImgUrl, imgwh.w, imgwh.h)"
          :style="{ width: imgwh.w + 'rpx', height: imgwh.h + 'rpx' }"
        />
      </view>
      <!-- <uv-album :urls="productDetail.images"></uv-album> -->
    </uv-popup>
  </view>
</template>

<style lang="scss" scoped>
page {
  // padding: 24rpx 30rpx 200rpx;
  box-sizing: border-box;
  background: #ececec;
}
.detail-wrapper {
  height: calc(100vh - 160rpx);
  overflow-y: scroll;
  overflow-x: hidden;
}
.noscroll {
  position: fixed;
}

.video-wrapper {
  width: 750rpx;
  height: 750rpx;
  .video {
    width: 750rpx !important;
    height: 750rpx !important;
    // width: 100%;
    // height: 100%;
  }
}

.box-1 {
  width: 750rpx;
  background: #ffffff;
  .info-boxs {
    height: 136rpx;
    padding: 30rpx 30rpx 0 30rpx;
    display: flex;
    .info-left {
      width: 76rpx;
      .img {
        width: 76rpx;
        height: 76rpx;
        border-radius: 50%;
      }
    }
    .info-right {
      flex: 1;
      padding-left: 15rpx;
      display: flex;
      .right1 {
        flex: 1;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 26rpx;
        text-align: left;
        font-style: normal;
        .title {
          font-size: 26rpx;
          display: flex;
          .shop-vip-level {
            font-size: 24rpx;
            width: 93rpx;
            height: 32rpx;
            position: relative;
            margin-left: 10rpx;
            // left: 60rpx;
            // top: 0;
            .bx1 {
              width: 93rpx;
              height: 32rpx;
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
            }
            .bx2 {
              width: 28rpx;
              height: 28rpx;
              position: absolute;
              top: 2rpx;
              left: 5rpx;
              z-index: 2;
            }
            .bx3 {
              position: absolute;
              top: 6rpx;
              left: 36rpx;
              z-index: 2;
              font-family: DingTalk, DingTalk;
              font-weight: normal;
              font-size: 20rpx;
              color: #941c0d;
              line-height: 20rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
        .sub-title {
          font-size: 20rpx;
          margin-top: 16rpx;
          font-weight: 400;
          // width: 93rpx;
          height: 32rpx;
          position: relative;
          .bx1 {
            width: 93rpx;
            height: 32rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
          }
          .bx2 {
            width: 28rpx;
            height: 28rpx;
            position: absolute;
            top: 2rpx;
            left: 5rpx;
            z-index: 2;
          }
          .bx3 {
            position: absolute;
            top: 6rpx;
            left: 36rpx;
            z-index: 2;
            font-family: DingTalk, DingTalk;
            font-weight: normal;
            font-size: 20rpx;
            color: #941c0d;
            line-height: 20rpx;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .right2 {
        width: 150rpx;
        height: 60rpx;
        background: #f7f7f7;
        border-radius: 30rpx;
        .follow {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000;
          line-height: 60rpx;
          font-style: normal;
          text-align: center;
          image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 8rpx;
          }
        }
      }
    }
  }
  .qishi-xuzhi {
    width: 690rpx;
    height: 98rpx;
    background: #f7f6f6;
    border-radius: 16rpx;
    // margin-top: 30rpx;
    margin-left: 30rpx;
    display: flex;
    padding: 33rpx 16rpx 33rpx 24rpx;
    .t1 {
      width: 209rpx;
      height: 29rpx;
      image {
        // width: 100%;
        width: 209rpx;
        height: 29rpx;
      }
    }
    .t2 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #4d4c4c;
      text-align: left;
      font-style: normal;
      margin-left: 24rpx;
      margin-top: 3rpx;
    }
    .t3 {
      margin-left: 173rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .qishi-renzheng-wrapper {
    position: relative;
    width: 690rpx;
    height: 98rpx;
    background: #f7f6f6;
    border-radius: 16rpx;
    // margin-top: 24rpx;
    margin-left: 30rpx;
    padding: 31rpx 17rpx 31rpx 29rpx;
    .line321 {
      width: 630rpx;
      height: 1rpx;
      background: #dddddd;
      position: absolute;
      top: 0;
      left: 30rpx;
    }
  }
  .qishi-renzheng {
    // width: 690rpx;
    // height: 98rpx;
    // background: #f7f6f6;
    // border-radius: 16rpx;
    // // margin-top: 24rpx;
    // margin-left: 30rpx;
    display: flex;
    // padding: 31rpx 17rpx 31rpx 29rpx;
    .left-approve {
      width: 163rpx;
      height: 36rpx;
      image {
        width: 100%;
      }
    }
    .right-approve {
      flex: 1;
      position: relative;
      .case1 {
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        top: -5rpx;
        right: 53rpx;
      }
      .case2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 26rpx;
        color: #212121;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        position: absolute;
        right: 0;
        top: 53rpx;
      }
      .case3 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 26rpx;
        color: #212121;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        position: absolute;
        right: 40rpx;
        top: 0;
      }
      .no-auth {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        right: 0;
        top: 0;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .qishi-details-box {
    margin: 30rpx;
    .details-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 36rpx;
      color: #212121;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }
    .details-money {
      display: flex;
      margin-top: 29rpx;
      .price-box {
        flex: 1;
        .price-ico {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 22rpx;
          color: #f52121;
          line-height: 22rpx;
          text-align: left;
          font-style: normal;
        }
        .price-text {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 48rpx;
          color: #f52121;
          line-height: 48rpx;
          letter-spacing: 1px;
          text-align: left;
          font-style: normal;
          margin-left: 4rpx;
        }
        .price-line {
          width: 1rpx;
          height: 20rpx;
          background: #cecece;
          margin-left: 15rpx;
          display: inline-block;
        }
        .price-delivery {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: rgba(51, 51, 51, 0.99);
          line-height: 26rpx;
          text-align: left;
          font-style: normal;
          margin-left: 13rpx;
        }
        .original-cost {
          font-family: OPPOSans, OPPOSans;
          font-weight: normal;
          font-size: 26rpx;
          color: rgba(51, 51, 51, 0.99);
          line-height: 26rpx;
          text-align: left;
          font-style: normal;
          text-decoration-line: line-through;
          margin-left: 29rpx;
        }
      }
      .shoucang-box {
        width: 200rpx;
        height: 26rpx;
        font-family: OPPOSans, OPPOSans;
        font-weight: normal;
        font-size: 26rpx;
        color: #999999;
        line-height: 26rpx;
        text-align: center;
        font-style: normal;
        text-align: right;
      }
    }
    .details-weizhi {
      display: flex;
      margin-top: 33rpx;
      padding-bottom: 30rpx;
      .left {
        width: 26rpx;
        height: 26rpx;
        background: url("@/static/images/CursorAltPointerMouse@2x.png")
          no-repeat;
        background-size: 26rpx 26rpx;
        margin-right: 13rpx;
        margin-top: 8rpx;
      }
      .right {
        flex: 1;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #212121;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
}

.view-img {
  // width: 100%;
  // height: 100%;
  // width: 600rpx;
  // image {
  //   width: 600rpx;
  //   height: 500rpx;
  // }
}

.box-2 {
  background: #ffffff;
  padding: 0 30rpx;
  margin-top: -30rpx;
  .menu-title {
    padding: 57rpx 0 60rpx 0;
  }
  .menus-wrapper {
    display: flex;
    .item-menu {
      position: relative;
      .menu-t1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 22rpx;
        font-style: normal;
      }
      .menu-t2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 30rpx;
        font-style: normal;
        margin-top: 23rpx;
      }
      .line {
        width: 1rpx;
        height: 50rpx;
        background: #c4c4c4;
        position: absolute;
        right: 0;
        top: 13rpx;
      }
    }
  }
  .count-title {
    padding: 66rpx 0 60rpx 0;
  }
  .count-wrapper {
    display: flex;
    .count-item {
      text-align: center;
      position: relative;
      .count-t1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 22rpx;
        font-style: normal;
      }
      .count-t2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 30rpx;
        font-style: normal;
        margin-top: 23rpx;
      }
      .line {
        width: 1rpx;
        height: 50rpx;
        background: #c4c4c4;
        position: absolute;
        right: 0;
        top: 13rpx;
      }
    }
  }
  .count-wrapper2 {
    display: flex;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    .count-item:nth-child(1) {
      // text-align: left;
      // text-indent: 0;
    }
    .count-item:nth-last-child(1) {
      // text-align: right;
    }
    .count-item {
      text-align: center;
      position: relative;
      // text-indent: 30rpx;
      .count-t1 {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 22rpx;
        color: #999999;
        line-height: 22rpx;
      }
      .count-t2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
        font-size: 22rpx;
        color: #222222;
        line-height: 22rpx;
        margin-top: 23rpx;
      }
      .line {
        width: 1rpx;
        height: 50rpx;
        background: #c4c4c4;
        position: absolute;
        right: 0;
        top: 13rpx;
      }
    }
  }
  .desc {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #212121;
    line-height: 54rpx;
    text-align: left;
    font-style: normal;
    // margin-top: 10rpx;
    padding-top: 33rpx;
    padding-bottom: 10rpx;
  }

  .img-wrapper {
    display: flex;
    flex-wrap: wrap;
    // width: 690rpx;
    padding-bottom: 31rpx;
    .img {
      box-sizing: border-box;
      border: 1rpx dashed#C4C4C4;
      border: 1rpx solid #fff;
    }
  }
  .len1,
  .len2 {
    .img {
      width: 690rpx;
      height: 687rpx;
    }
  }
  .len3 {
    .img:nth-child(1) {
      width: 690rpx;
      height: 687rpx;
    }
    .img:nth-child(2),
    .img:nth-child(3) {
      width: 345rpx;
      height: 345rpx;
    }
  }
  .len4 {
    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }
    .img:nth-child(3),
    .img:nth-child(4) {
      width: 345rpx;
      height: 345rpx;
    }
  }
  .len5 {
    .img:nth-child(1) {
      width: 690rpx;
      height: 687rpx;
    }
    .img {
      width: 345rpx;
      height: 345rpx;
    }
  }
  .len6 {
    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }
    .img {
      width: 345rpx;
      height: 345rpx;
    }
  }
  .len7 {
    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }
    .img:nth-child(3),
    .img:nth-child(4) {
      width: 345rpx;
      height: 345rpx;
    }
    .img {
      width: 230rpx;
      height: 228rpx;
    }
  }
  .len8 {
    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }
    .img {
      width: 230rpx;
      height: 228rpx;
    }
  }
  .len9 {
    .img:nth-child(1),
    .img:nth-child(2) {
      width: 690rpx;
      height: 687rpx;
    }
    .img:nth-child(3),
    .img:nth-child(4),
    .img:nth-child(5),
    .img:nth-child(6) {
      width: 345rpx;
      height: 345rpx;
    }
    .img {
      width: 230rpx;
      height: 228rpx;
    }
  }
}

.liuyan {
  width: 750rpx;
  background: #ffffff;
  margin-top: 20rpx;
  padding-bottom: 200rpx;
  .title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #212121;
    line-height: 30rpx;
    text-align: left;
    font-style: normal;
    padding: 43rpx 30rpx 60rpx 30rpx;
  }
  .main1 {
    position: relative;
    .search-btn {
      position: absolute;
      right: 30rpx;
      top: 0;
      z-index: 999;
      width: 120rpx;
      height: 62rpx;
      background: #ce4831;
      border-radius: 31rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 24rpx;
      text-align: center;
      font-style: normal;
      line-height: 62rpx;
    }
  }
  .main {
    display: flex;
    image {
      width: 62rpx;
      height: 62rpx;
      border-radius: 50%;
      margin-left: 30rpx;
    }
    input {
      // width: 602rpx;
      width: 466rpx;
      height: 62rpx;
      background: #efefef;
      border-radius: 31rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      line-height: 26rpx;
      text-align: left;
      font-style: normal;
      margin-left: 26rpx;
      padding-left: 25rpx;
    }
  }
  .comment-list {
    .comment-item:nth-child(1) {
      margin-top: 62rpx;
    }
    .comment-item {
      display: flex;
      padding: 0 32rpx;
      margin-top: 30rpx;
      position: relative;
      .avatar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 50%;
      }
      .com-box {
        flex: 1;
        padding-left: 20rpx;
        border-bottom: 1rpx solid #eaebed;
        // background: red;
        position: relative;
        .name {
          .n1 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #000000;
            line-height: 30rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .n2 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #999999;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20rpx;
          }
        }
        .content {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          margin-top: 14rpx;
          padding-bottom: 36rpx;
        }
      }
      .del {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 26rpx;
        right: 37rpx;
      }
    }
  }
}

// .empty-bottom {
//   height: 150rpx;
// }

.notice-wrapper {
  width: 750rpx;
  height: 890rpx;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  .top {
    width: 750rpx;
    height: 237rpx;
    background: linear-gradient(96deg, #ffffff 0%, #f7d7d2 100%);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    position: relative;
    .empty {
      height: 98rpx;
    }
    .t1 {
      width: 366rpx;
      height: 50rpx;
      margin-left: 30rpx;
      image {
        width: 366rpx;
        height: 50rpx;
      }
    }
    .t2 {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      margin-top: 19rpx;
      margin-left: 30rpx;
    }
    .t3 {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      top: 22rpx;
      right: 30rpx;
      .image {
        width: 48rpx;
        height: 48rpx;
      }
    }
    .t4 {
      width: 202rpx;
      height: 141rpx;
      position: absolute;
      top: 85rpx;
      right: 11rpx;
      .image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }
  .bottom {
    padding: 0 45rpx;
    margin-top: 40rpx;
    .title {
      display: flex;
      .title1 {
        width: 20rpx;
        height: 20rpx;
        background: #ffffff;
        border: 4rpx solid #000000;
      }
      .title2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #060606;
        line-height: 32rpx;
        text-align: left;
        font-style: normal;
        margin-left: 15rpx;
      }
    }
    .sub-title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 49rpx;
      text-align: left;
      font-style: normal;
    }
  }
  .btn {
    width: 614rpx;
    height: 100rpx;
    background: linear-gradient(90deg, #f35034 0%, #c7452f 100%);
    border-radius: 50rpx;
    margin-top: 110rpx;
    margin-left: 68rpx;
    text-align: center;
    line-height: 100rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #ffffff;
    font-style: normal;
  }
}

.info-box {
  .info-left {
    margin-right: 20rpx;

    .img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 6rpx 6rpx 2rpx 0rpx rgba(0, 0, 0, 0.1);
    }
  }

  .info-right {
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    width: 100%;

    .follow {
      background: linear-gradient(
        0deg,
        rgba(191, 1, 3, 1),
        rgba(255, 84, 2, 1)
      );
      width: 120rpx;
      height: 46rpx;
      font-size: 28rpx;
      font-weight: 600;
      border-radius: 6rpx;
      color: #ffffff;
      border: 0rpx solid rgba(187, 187, 187, 1);
    }

    .store-name {
      margin-top: 8rpx;

      .img {
        width: 27rpx;
        height: 27rpx;
        margin-right: 14.5rpx;
      }

      .text {
        font-size: 28rpx;
      }
    }
  }
}

.approve-box {
  margin-top: 24rpx;
  font-size: 28rpx;

  .left-approve {
    color: rgba(154, 154, 154, 1);

    .state-text {
      color: rgba(51, 51, 51, 1);
      font-size: 32rpx;
    }
  }

  .right-approve {
    .no-auth {
      min-width: 300rpx;
      text-align: right;
    }
    text {
      color: rgba(191, 1, 3, 1);
    }

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 8rpx;
    }
  }
}

.details-box {
  margin-top: 24rpx;

  .details-title {
    margin-bottom: 40rpx;
    padding-bottom: 27rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    border-bottom: 2rpx solid rgba(239, 239, 239, 1);
  }

  .introduce-box {
    margin-bottom: 30rpx;

    .margin-box {
      margin-bottom: 20rpx;
    }

    .price-box {
      .price-ico {
        color: rgba(243, 96, 78, 1);
        font-size: 24rpx;
      }

      .price-text {
        margin-right: 12rpx;
        color: rgba(243, 96, 78, 1);
        font-size: 40rpx;
      }

      .original-cost {
        text-decoration: line-through;
      }
    }

    .gray-box {
      color: rgba(206, 206, 206, 1);
      font-size: 24rpx;
    }
  }

  .menu-list {
    margin-bottom: 30rpx;

    .menu-box {
      margin-bottom: 10rpx;
      padding: 20rpx 30rpx;
      border-radius: 8rpx;
      background-color: rgba(239, 239, 239, 1);
      border: 0rpx solid rgba(187, 187, 187, 1);
      color: rgba(108, 108, 108, 1);
      font-size: 28rpx;

      .red-box {
        color: rgba(191, 1, 3, 1);
      }
    }
  }
}

.introd-text {
  margin-bottom: 30rpx;
  color: rgba(79, 79, 79, 1);
  font-size: 28rpx;
}

.img-list {
  image,
  video {
    width: 642rpx;
    height: 426.94rpx;
    margin-bottom: 5rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
  }
}

.btn-box {
  // height: 104rpx;
  .collect-box {
    margin-top: 10rpx;
    margin-left: 34rpx;
    width: 48rpx;
    height: 85rpx;
    image {
      width: 48rpx;
      height: 85rpx;
    }
  }

  .handle-btn {
    button {
      width: 220rpx;
      height: 80rpx;
      background: #f4f5f7;
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      line-height: 26rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
    }

    .buy-btn {
      background: linear-gradient(90deg, #ef5439 0%, #c7452f 100%);
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      line-height: 26rpx;
      text-align: right;
      font-style: normal;
      text-transform: none;
      margin-left: 15rpx;
    }
  }
}

.validate {
  padding: 40rpx;

  .icon {
    margin-bottom: 20rpx;
    width: 114rpx;
    height: 114rpx;
    border-radius: 50%;
    background-color: #fef3f2;

    .icon2 {
      width: 81rpx;
      height: 81rpx;
      border-radius: 50%;
      background-color: #fee4e2;
    }

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 700;
    margin-bottom: 20rpx;
  }

  .content {
    color: #6c6c6c;
    font-size: 28rpx;
  }

  .pop-btn {
    margin-top: 61rpx;

    button {
      flex: 0.46;
      height: 80rpx;
      border-radius: 16rpx;
      background-color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
    }

    .cancel {
      border: 2rpx solid rgba(154, 154, 154, 1);
      color: rgba(79, 79, 79, 1);
    }

    .confirm-del {
      background: linear-gradient(
        180deg,
        rgba(255, 84, 2, 1) 0%,
        rgba(191, 1, 3, 1) 99%
      );
      color: rgba(255, 255, 255, 1);
    }
  }

  .title-pop {
    margin-bottom: 40rpx;

    .head-img {
      .img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 21rpx;
        border-radius: 50%;
      }
    }

    .title-text {
      text {
        color: rgba(16, 16, 16, 1);
        font-size: 24rpx;

        &:first-child {
          margin-top: 4rpx;
          font-size: 32rpx;
        }
      }
    }
  }

  .describe-box {
    margin-bottom: 20rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
  }

  .qr-code {
    width: 560rpx;
    height: 560rpx;
    margin-bottom: 80rpx;
    border: 2rpx solid rgba(206, 206, 206, 1);

    .img {
      width: 100%;
      height: 516rpx;
      border-radius: 12rpx;
      background-color: rgba(255, 255, 255, 1);
      border: 2rpx solid rgba(206, 206, 206, 1);
    }
  }

  .save-btn {
    button {
      height: 80rpx;
      line-height: 40rpx;
      border-radius: 50rpx;
      background: linear-gradient(
        0deg,
        rgba(191, 1, 3, 1) 0%,
        rgba(255, 84, 2, 1) 99.2%
      );
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Roboto;
      border: 0rpx solid rgba(187, 187, 187, 1);
    }
  }

  .manage-row {
    padding: 30rpx 0;
    border-bottom: 2rpx solid rgb(230, 229, 229);
    color: rgba(108, 108, 108, 1);
    font-size: 28rpx;
    text-align: center;

    &:last-child {
      border-bottom: 0;
      padding: 30rpx 0 0 0;
    }
  }
}
</style>
